<template>
  <div class="home">
    <van-search
      v-model="txt"
      shape="round"
      background="#4fc08d"
      placeholder="请搜索所需商品名称"
      @input="searchShop"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in LoopImage" :key="item.id">
        <img :src="item.coverImage | filterImage" alt="item.id" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="4" :icon-size="85">
      <van-grid-item
        :to="{ name: 'VueYimutianList', params: { id: value.id } }"
        v-for="value in categories"
        :key="value.id"
        :icon="value.coverImage | filterImage"
        :text="value.name"
      ></van-grid-item>
    </van-grid>
    <van-card
      v-for="i in products"
      :tag="i.id + ''"
      :key="i.id"
      :price="i.price"
      :desc="i.desc"
      :title="i.name"
      :thumb="i.coverImage | filterImage"
    ></van-card>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '../components/HelloWorld.vue';
import { get } from '../tools/request';
import { categoriesAPI } from '../service/categories';

export default {
  name: 'HomeView',
  data() {
    return {
      LoopImage: [],
      products: [],
      categories: [],
      value: '',
      txt: '',
    };
  },
  components: {},
  async created() {
    get('/api/v1/banners').then((res) => {
      this.LoopImage = res.data.data;
    });
    get('/api/v1/products').then((res1) => {
      this.products = res1.data.data;
      console.log(this.products);
    });
    const res2 = await categoriesAPI();
    this.categories = res2.data.data;
    // console.log(this.categories);
  },
  methods: {
    searchShop() {
      console.log(1);

      console.log(this.txt);
      // eslint-disable-next-line dot-notation
      return this.products.filter((i) => i['name'].includes(this.txt));
    },
  },
};
</script>
<style scoped>
img {
  width: 100%;
  height: 250px;
}
.home .van-card {
  margin-top: 30px;
  overflow: auto;
}
</style>
